<template>
  <view class="vip">
    <view class="view-img">
      <image :src="VIPicon" style="width: 25vw; height: 25vw; border-radius: 50%" />
    </view>
    <view class="vip-title">
      <text class="vip-title-h">VIP尊享特权</text>
      <text class="vip-title-t">首页黄金展示专区，受众率最大，相亲成功率暴增。</text>
    </view>
    <view class="btn">
      <TopButton
        v-for="(item, index) in buttons"
        :key="index"
        :title="item.title"
        :price="item.price"
        :icon="true"
        :isSelected="activeIndex === index"
        @update:selected="changeTab(index)"
      />
    </view>
    <view class="standard-container">
      <text class="standard-title">vip尊享特权</text>
      <view class="standard-list">
        <view class="list-item">
          <text class="dot">·</text>
          <text> 个人资料必须完整，如头像、生日、身高、昵称等，如果未填请立即完善 </text>
        </view>
        <view class="list-item">
          <text class="dot">·</text>
          <text>个人资料已通过审核</text>
        </view>
        <view class="list-item">
          <text class="dot">·</text>
          <text>个人资料状态非隐藏状态</text>
        </view>
      </view>
    </view>
    <view class="vip-footer">
        <!-- 屏蔽 -->
      <!-- <button type="primary" class="top-button">
        <image class="top-icon" src="@/static/My/VIP/vip-fill.png"> </image>
        立即充值
      </button> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VIPicon from '@/static/My/VIP/VIPPageLogo.png'
import TopButton from '@/pages/my/components/TopButton.vue'

const activeIndex = ref(0)
const buttons = ref([
  { title: '90天', price: '￥100' },
  { title: '180天', price: '￥50' },
])

const changeTab = (index: number) => {
  activeIndex.value = index
}
</script>

<style lang="scss" scoped>
.vip {
  width: 100%;
  height: 100vh;
  padding: 3%;
  box-sizing: border-box;
  background-color: #ffffff;

  .view-img {
    width: 100%;
    height: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .vip-title {
    width: 100%;
    height: 7%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .vip-title-h {
      font-size: 5vw;
      font-weight: 500;
    }

    .vip-title-t {
      font-size: 3vw;
      color: #cccccd;
    }
  }

  .btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
  }

  .standard-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: auto;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    max-width: 600px;

    .standard-title {
      position: relative;
      padding: 3vh;
      font-size: 2vh;
      color: #848384;
    }

    .standard-list {
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .dot {
      font-size: 2.5rem;
      margin-right: 0.5rem;
    }

    .list-item {
      width: 100%;
      color: rgb(141, 141, 141);
      display: flex;
      align-items: center;
    }
  }

  .vip-footer {
    width: 100%;
    margin-bottom: -2%;

    .top-button {
      width: 100%;
      background-image: linear-gradient(to left, #ffa500, #ff7f50);
      border-radius: 1.5em;
      color: white;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 5vw;

      .top-icon {
        width: 4vh;
        height: 4vh;
      }
    }
  }
}
</style>
